<template>
      <div class="logo-container">
          <router-link to="/">
            <img src="/logo.png" alt="LOGO" class="logo">
          </router-link>
        </div>
  <div class="register-box">
          <h2 class="register-title">カンタン新規会員登録</h2>
  <el-form ref="emailFormRef" :model="emailForm" :rules="emailRules">
    <div class="form-tip">メールアドレスではじめる</div>
    <el-form-item prop="email">
      <el-input v-model="emailForm.email"  style="height: 50px;width: 100%;">
        <!-- <template #prefix>
          <el-icon>
            <Message />
          </el-icon>
        </template> -->
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="register-button" style="width: 100%;" @click="handleNext"> 会員登録する（無料）</el-button>
    </el-form-item>
  </el-form>
  </div>
      <div class="register-options">
      <router-link to="/login" class="login-link">ログインはこちら</router-link>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { Message } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ email: '' })
  }
})

// 定义emits
const emit = defineEmits(['update:modelValue', 'next'])

// 表单引用
const emailFormRef = ref(null)

// 邮箱表单数据
const emailForm = reactive({
  email: props.modelValue.email || ''
})

// 邮箱验证规则
const emailRules = {
  // email: [
  //   { required: true, message: '请输入メールアドレス', trigger: 'blur' },
  //   { type: 'email', message: '请输入有効なメールアドレス', trigger: 'blur' }
  // ]
}

// 処理下一步
const handleNext = () => {
  emailFormRef.value.validate((valid) => {
    if (valid) {
      console.log('EmailStep handleNext - emailForm.email:', emailForm.email)
      // 確実にemailが更新されるように明示的に更新
      emit('update:modelValue', { email: emailForm.email, verificationCode: '' })
      // 使用nextTick确保数据更新后再触发next事件
      setTimeout(() => {
        emit('next')
      }, 0)
    }
  })
}

// 监听props变化，避免循环更新
watch(() => props.modelValue, (newVal) => {
  if (newVal && newVal.email !== emailForm.email) {
    emailForm.email = newVal.email || ''
  }
}, { deep: true, immediate: true })

// 監听emailForm変化，实时同步到父组件
watch(() => emailForm.email, (newEmail) => {
  console.log('EmailStep watch - emailForm.email changed to:', newEmail)
  emit('update:modelValue', { email: newEmail, verificationCode: '' })
})
</script>

<style scoped>
.logo {
  height: 60px;
  object-fit: contain;
}
.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.logo-container a {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-container a:hover {
  transform: scale(1.05);
}
.register-title {
  text-align: center;
  margin-bottom: 15px;
  color: #333;
}
.register-box {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
}
.form-tip {
  margin-bottom: 20px;
  font-size: 12px;
  color: #333;

}

.register-button {
  height: 45px;
  font-size: 12px;
  border-radius: 6px;
}

.register-options {
  text-align: center;
  margin-top: 20px;
}

.login-link {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
}

.login-link:hover {
  text-decoration: underline;
}
</style>